import React, { FC, useEffect } from 'react'
import { Form, Input } from 'antd'
import { useDispatch } from 'react-redux'
import useGetPageInfo from '../../../../hooks/useGetPageInfo'
import { resetPageInfo } from '../../../../store/pageInfoReducer'

const { TextArea } = Input

const PageSetting: FC = () => {
    const dispatch = useDispatch()
    const pageInfo = useGetPageInfo()
    const [form] = Form.useForm()

    const { title = '', desc = '', js = '', css = '' } = pageInfo

    // 实时更新表单内容
    useEffect(() => {
        form.setFieldsValue(pageInfo)
    }, [pageInfo])

    /**
     * 更新页面信息数据
     */
    const handleOnValuesChange = () => {
        const newValues = form.getFieldsValue()
        console.log('newValues', newValues)
        dispatch(resetPageInfo(newValues))
    }

    return (
        <Form
            layout="vertical"
            initialValues={pageInfo}
            onValuesChange={handleOnValuesChange}
            form={form}
        >
            <Form.Item
                label="问卷标题"
                name="title"
                rules={[{ required: true, message: '请输入问卷标题' }]}
            >
                <Input placeholder="请输入问卷标题…" />
            </Form.Item>
            <Form.Item label="问卷描述" name="desc">
                <TextArea placeholder="请输入问卷描述…" />
            </Form.Item>
            <Form.Item label="问卷样式" name="css">
                <TextArea placeholder="请输入问卷 CSS 代码" />
            </Form.Item>
            <Form.Item label="问卷脚本" name="js">
                <TextArea placeholder="请输入问卷 JS 脚本代码" />
            </Form.Item>
        </Form>
    )
}
export default PageSetting
